色彩模型

在繼續往下介紹其他調整之前，要先來介紹一下色彩模型。

之前介紹的顏色展現方式我們都是用 RGB 三個通道的值來表示，也就是俗稱的 加法模型

當然前端在工作上也可能常用到的是 Hex 的表現方式 ( 也就是十六進位的RGB )，像是 #f9f9f9之類。

而這種表現方式對於人類來說不夠直覺，大家應該很難馬上判定出 #234f42 或者 [35, 79, 66] 的實際色彩吧。

所以接下來，我們將會把 RGB 轉成其他色彩模型的表現方式

HSV ( HSB )、HSL

通常如果要調整飽和度的時候，要轉換的色彩模型都會常聽到這三個 HSV、HSB、HSL。

其中 HSV、HSB 這兩個其實都代表同一種，所以我們當成同一個看，而他們又跟 HSL 差在哪呢

首先看一下 H ( Hue ) 代表著色相，在這兩種表現裡面都是一樣的。

取自wiki

H 的範圍為 0 ~ 360 代表不一樣的色相，在兩種模型裡面是一樣的

而 S 為 ( Saturation )，代表著色彩飽和度，但在這兩種模型的用法會略有差異

V ( Value) 、B ( Brightness ) 與 L ( Lightness )，代表著色彩明度，在兩種模型的用法一樣會略有差異

取自wiki

最大的差別，我覺得是在於色彩最飽和時候的差距，我們用 colorizer 網站來算出同個顏色在不同模型的參數

飽和度最高的紅色在 HSL 中為( 360 , 100 , 50) 在 HSV 中為 ( 360 , 100, 100)

在配合上方的圓錐體看，對於 HSL 來說飽和度跟亮度像是分開的概念，不管飽和度為多少，只要亮度為最高，都會變成白色，也就是說就算飽和度到達最高，HSL ( 360 , 100 , 100)的情況下，顏色為白色的情況。

推薦可以去上面那個網站實際自己操作一下，體驗一下兩者差異

至於這兩種哪一個比較適合當人機介面操作的話，這部分就見仁見智，目前好像沒有一個定論，而且實務上都有軟體使用，基本上要分辨的話只要看最上方那一排是白色的話就是使用 HSL 介面了，但偷偷看了 PhotoShop 之後，調色盤是使用了 HSV 介面，之後我們先用　HSV　試試看吧。

CSS 的表現方式是使用 HSL 喔。background-color: hsl(360, 50%, 50%);

實作

接下來看看轉換的部分吧， 這裡 有轉換數學公式，這邊就不詳細解釋，直接參考這個 實現

export const rgbToHsv = rgb => {
  let rdif
  let gdif
  let bdif
  let h
  let s

  const colorR = rgb[0] / 255
  const colorG = rgb[1] / 255
  const colorB = rgb[2] / 255
  const v = Math.max(colorR, colorG, colorB)
  const diff = v - Math.min(colorR, colorG, colorB)
  const diffc = c => {
    return (v - c) / 6 / diff + 1 / 2
  }

  if (diff === 0) {
    h = 0
    s = 0
  } else {
    s = diff / v
    rdif = diffc(colorR)
    gdif = diffc(colorG)
    bdif = diffc(colorB)

    if (colorR === v) {
      h = bdif - gdif
    } else if (colorG === v) {
      h = 1 / 3 + rdif - bdif
    } else if (colorB === v) {
      h = 2 / 3 + gdif - rdif
    }

    if (h < 0) {
      h += 1
    } else if (h > 1) {
      h -= 1
    }
  }

  return [h * 360, s * 100, v * 100]
}

小結

今天介紹了色彩在不同模型中的表現方式，對於接下來的調整，我們會使用不同的模型來做，明天見!